<script>
import NavHeader from '../../components/common/NavHeader.vue'
import Footer from '../../components/common/Footer.vue'
import SecondTitle from '../../components/common/SecondTitle.vue';
import LittleTitle from '../../components/common/LittleTitle.vue'
import ProjectIntro from '../../components/achievement/ProjectIntro.vue';
import Pagination from '../../components/common/Pagination.vue';

export default{
    components:{
        NavHeader,
        Footer,
        SecondTitle,
        LittleTitle,
        ProjectIntro,
        Pagination
    },
    data(){
        return{
            showChild:false,
            titleChild:"项目"
        }
    }
}


</script>

<template>
    <div class="container">
        <NavHeader />
        <SecondTitle />
        <LittleTitle :show="showChild" :title="titleChild" class="littletitle"/>
        <div class="project">
            <ProjectIntro v-for="index in 5" :key="index"></ProjectIntro>
        </div>
        <Pagination/>
        <Footer class="footer"></Footer>
    </div>
</template>

<style  scoped>
    .littletitle{
        position: relative; 
        top: 131px;
    }
    .project{
        position: relative;
        top: 131px;
        width: 100%;   
        background-color: white;  
        height: fit-content;  
    }
    .footer{
        position: relative;
        top: 131px;
    }
</style>